<!-- 益生 等级进度条与益生用户信息 -->
<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <div id="ys_member">
      <div class="progress-panel">
        <div class="steps">
          <div class="step" :style="{ width: (100 / level_list.length).toFixed(2) + '%' }" :class="{ 'active-step': item.member_current_level }" v-for="(item, index) in level_list" :key="index">
            <div class="line"></div>
            <div class="icon">
              <img :src="require('@/resource/images/member/deposit_group_current_state.png')" alt="" />
            </div>
          </div>
        </div>
        <div class="next-level">
          下一个等级还需要消费 <em style="color:#ff4949">xx</em> 元
        </div>
      </div>
      <!-- 二期对接 -->
      <div class="ys-member-info">
        <div class="title">我的线下账户</div>
        <div class="list">
          <div class="cell">
            <div class="cell-size-13">xxx元</div>
            <div class="cell-size-10">冻结xx元</div>
            <div class="cell-size-11">红包</div>
          </div>
          <div class="cell">
            <div class="cell-size-13">xxx元</div>
            <div class="cell-size-10">冻结xx元</div>
            <div class="cell-size-11">红包</div>
          </div>
          <div class="cell">
            <div class="cell-size-13">xxx元</div>
            <div class="cell-size-10">冻结xx元</div>
            <div class="cell-size-11">红包</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {preview_color,} = this.datas;

			return `
		    .component-${this.id} {
		        background-color: ${preview_color.color};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
		    }
		`;
		}
	};

	export default {
		props: ["id", "datas", "styles"],
		data() {
			return {
				level_list: [
					{
						"id": 0,
						"level": 0,
						"level_name": "普通会员",
						"member_current_level": 1
					},
					{
						"id": 17,
						"level": 1,
						"level_name": "会员等级一",
						"member_current_level": 0
					},
					{
						"id": 25,
						"level": 1,
						"level_name": "潜在客户",
						"member_current_level": 0
					},
					{
						"id": 16,
						"level": 2,
						"level_name": "会员等级二",
						"member_current_level": 0
					}
				]
      };
		},
		computed: {
			css() {
				return "<style>" + css.call(this) + "</style>";
			},
			className() {
				const name = ["component-wrapper", `component-${this.id}`];
				return name;
			},
		},
		methods: {},
	};
</script>

<style lang="less" scoped>
  * {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  // 默认
  .component-wrapper {
    width: 375px;
    padding: 10px;
  }

  #ys_member {
    padding: 10px;
    border-radius: 15px;
    background-color: #fff;
    .progress-panel {
      padding: 10px;
      background: rgba(255, 193, 30, 0.1);
      border-radius: 3px;
      .steps {
        display: flex;
        margin: 10px 0 16px;
        .step {
          position: relative;
          .line {
            width: 100%;
            height: 10px;
            border-radius: 5px;
            background-color: #fec400;
            opacity: 0.2;
          }
          .icon {
            position: absolute;
            right: -5px;
            top: -50%;
            height: 26px;
            img {
              height: 100%;
              object-fit: contain;
            }
          }
        }
        .active-step {
          .line {
            opacity: 1;
          }
        }
      }
      .next-level {
        text-align: left;
        font-size: 12px;
      }
    }
    .ys-member-info {
      text-align: center;
      .title {
        font-weight: bold;
        line-height: 30px;
        text-align: left;
        margin-top: 5px;
      }
      .list {
        display: flex;
        .cell {
          flex: 1;
          font-weight: 600;
          line-height: 18px;
          .cell-size-13 {
            font-size: 13px;
            color: #403f3f;
          }
          .cell-size-10 {
            font-size: 10px;
            color: #757272;
          }
          .cell-size-11 {
            font-size: 11px;
            color: #323232;
          }
        }
      }
    }
  }
</style>
